<template>
    <div class="bg_default p_20 h60">
        <span class="lar_font_size text-primary">消息中心</span>
        <sup v-if="msgsNumber > 0">
            <span
                class="position_a"
                style="
                    height: 16px;
                    line-height: 12px;
                    display: inline-block;
                    background-color: #fc526e;
                    border-radius: 4px;
                    min-width: 10px;
                    top: 13px;
                "
            >
                <span style="font-size: 10px; color: #ffffff; padding: 0 4px">
                    {{ msgsNumber > 99 ? '99+' : msgsNumber }}
                </span>
            </span>
        </sup>
        <span class="fr cursor_p">
            <div v-if="!isEditStatus" class="edit_icon" style="width: 16px; height: 16px" @click="actionMessage"></div>
            <span v-else style="color: #999999; font-size: 16px" @click="actionMessage">取消</span>
        </span>
    </div>
    <div v-if="msgsList.length > 0" class="message_list">
        <div
            v-for="item in msgsList"
            :key="item.id"
            style="display: flex; mix-height: 70px; border-top: 1px solid #ebebeb; cursor: pointer"
        >
            <!--            messageStatus 0未读1已读 content内容 active是否选中 expand是否打开-->
            <div v-if="isEditStatus" style="display: flex; padding: 20px" @click="checkedMessageActive(item)">
                <div>
                    <div
                        v-if="item.active"
                        style="width: 16px; height: 16px; margin-top: 8px"
                        class="selected_icon"
                    ></div>
                    <div v-else style="width: 16px; height: 16px; margin-top: 8px" class="unselected_icon"></div>
                </div>
                <div style="margin-left: 10px">
                    <div>
                        <span
                            :class="item.messageStatus === 0 ? 'font_color_0' : 'font_color_1'"
                            style="font-size: 14px; width: 195px; display: inline-block"
                        >
                            {{ item.title }}
                        </span>
                        <span style="font-size: 12px; color: #999999">{{ item.createdTime }}</span>
                    </div>
                    <div>
                        <span style="font-size: 12px; color: #999999">{{ item.content }}</span>
                    </div>
                </div>
            </div>
            <div v-else class="w_100" @click="checkedMessageExpand(item)">
                <div class="w_100">
                    <div style="padding: 15px 20px 8px 20px" class="w_100">
                        <span
                            :class="item.messageStatus === 0 ? 'text-primary' : 'text-weaken'"
                            style="font-size: 14px; width: 195px; display: inline-block"
                        >
                            {{ item.title }}
                        </span>
                        <span style="font-size: 12px; color: #999999">{{ item.createdTime }}</span>
                        <span style="margin-left: 20px; display: inline-block">
                            <div v-if="item.expand" style="width: 16px; height: 16px" class="off_icon"></div>
                            <div v-else style="width: 16px; height: 16px" class="open_icon"></div>
                        </span>
                    </div>
                    <div
                        v-if="item.expand"
                        style="height: 110px; background-color: #ebebeb; padding: 10px 20px"
                        class="w_100"
                    >
                        <span style="font-size: 12px; color: #999999">{{ item.content }}</span>
                    </div>
                    <div v-else style="margin-left: 20px; margin-bottom: 15px">
                        <span style="font-size: 12px; color: #999999">{{ item.content }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div v-else>
        <div class="no_data_img"></div>
        <div style="text-align: center; color: #666666; font-size: 14px">
            <span>暂无消息~</span>
        </div>
    </div>
    <div
        style="
            height: 65px;
            position: absolute;
            bottom: 0px;
            width: 100%;
            background-color: #ebebeb;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        "
    >
        <div style="margin: 0 10px; display: flex">
            <div style="width: 33%" @click="checkedAllMessage">
                <div class="select_all_icon operate_icon"></div>
            </div>
            <div style="width: 33%" @click="setReadMessage">
                <div class="read_icon operate_icon"></div>
            </div>
            <div style="width: 33%" @click="delMessage">
                <div class="delete_icon operate_icon"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getAllMsg, getCount, deleteMsg, setMsg } from '@/api/api.query.util';
import { formatDateBeiJing } from '@/utils/utils';
import PubSub from 'pubsub-js';

const msgsNumber = ref(0);
const msgsList = ref([]);
const isEditStatus = ref(false);

function initCount() {
    getCount({
        method: 'get',
        data: {},
    }).then((res) => {
        msgsNumber.value = res.result;
    });
}
initCount();
initMsg();
function getMsg() {
    const promise = new Promise((resolve) => {
        getAllMsg({
            method: 'get',
            data: {},
        }).then((res) => resolve(res));
    });
    return promise;
}
async function initMsg() {
    try {
        const res = await getMsg();
        msgsList.value = res.result;
        msgsList.value.forEach((item) => {
            item.expand = false;
            item.active = false;
            item.createdTime = formatDateBeiJing(item.createdTime, 'MM-dd hh:mm', 'UCT');
        });
    } catch (e) {}
}
function actionMessage() {
    if (msgsList.value.length === 0) return;
    if (isEditStatus.value) {
        msgsList.value.forEach((data) => {
            data.active = false;
        });
    }
    isEditStatus.value = !isEditStatus.value;
}
function checkedMessageActive(item) {
    item.active = !item.active;
}
function checkedMessageExpand(item) {
    msgsList.value.forEach((data) => {
        if (data !== item) {
            data.expand = false;
        }
    });
    item.expand = !item.expand;
    setMsg({
        method: 'post',
        data: {
            userIdList: [item.id],
        },
    }).then(() => {
        item.messageStatus = 1;
        initCount();
        PubSub.publish('initCount');
    });
}
function checkedAllMessage() {
    isEditStatus.value = true;
    msgsList.value.forEach((data) => {
        data.active = true;
    });
}

function getIdList() {
    const userIdList = [];
    msgsList.value.forEach((item) => {
        if (item.active) {
            userIdList.push(item.id);
        }
    });
    return userIdList;
}

function setReadMessage() {
    const userIdList = getIdList();
    if (userIdList.length === 0) return;
    setMsg({
        method: 'post',
        data: {
            userIdList,
        },
    }).then(() => {
        initMsg();
    });
}
async function delMessage() {
    const userIdList = getIdList();
    if (userIdList.length === 0) return;
    deleteMsg({
        method: 'post',
        data: {
            userIdList,
        },
    }).then(() => {
        initMsg();
    });
}
</script>

<style lang="scss" scoped>
.operate_icon {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin: 16px auto 0;
}
.message_list {
    height: calc(100% - 125px);
    overflow: auto;
    background-color: #ffffff;
}
.message_list::-webkit-scrollbar {
    width: 0 !important;
}
.no_data_img {
    background: url('~@/assets/image/no message@2x.png') no-repeat 0 / 106px;
    width: 98px;
    height: 106px;
    margin: 30px auto;
}
</style>
